<script setup>
import { ref, onMounted } from 'vue';
import { SearchOutlined, MessageOutlined } from '@ant-design/icons-vue';
import { useRouter } from "vue-router";
import {jwtDecode} from "jwt-decode";
import {message} from "ant-design-vue";

const router = useRouter();
const currentTab = ref('collections');
const token = localStorage.getItem("access-token");
const userRole = ref(false);

const setCurrentTab = (item) => {
  currentTab.value = item;
  router.push("/home/myself/" + item);
};
setCurrentTab(currentTab.value);

onMounted(() => {
  try {
    const decodedToken = jwtDecode(token);
    // console.log(decodedToken)
    const userRoleTemp = decodedToken.role; // 确保后端 token 中包含 role 字段
    if(userRoleTemp === 'LANDLORD'){
      userRole.value = true;
      sessionStorage.setItem("userRole",true);
    }

  } catch (error) {
    console.error('Token 解析失败:', error);
    message.error('登录信息解析失败');
  }
});
</script>

<template>
  <div class="min-h-screen bg-gray-50">
    <div class="container mx-auto px-4 py-6 flex">
      <!-- 左侧导航 -->
      <div class="w-48 flex-shrink-0 left-20 p-4 ">
        <div class="space-y-1">
          <div class="text-gray-600 font-medium mb-4">个人中心</div>
          <a-button v-if="userRole" type="text" class="block w-full text-left "
                    :class="{ 'bg-orange-500 text-white': currentTab === 'posts' }" @click="setCurrentTab('posts')">
            我的发布
          </a-button>

          <a-button type="text" class="block w-full text-left"
                    :class="{ 'bg-orange-500 text-white': currentTab === 'collections' }" @click="setCurrentTab('collections')">
            我的收藏
          </a-button>
          <a-button type="text" class="block w-full text-left "
                    :class="{ 'bg-orange-500 text-white': currentTab === 'history' }" @click="setCurrentTab('history')">
            历史记录
          </a-button>
          <a-button v-if="userRole" type="text" class="block w-full text-left "
                    :class="{ 'bg-orange-500 text-white': currentTab === 'booking' }" @click="setCurrentTab('booking')">
            预约申请
          </a-button>
          <a-button v-if="!userRole" type="text" class="block w-full text-left "
                    :class="{ 'bg-orange-500 text-white': currentTab === 'booking' }" @click="setCurrentTab('booking')">
            预约记录
          </a-button>
          <a-button type="text" class="block w-full text-left "
                    :class="{ 'bg-orange-500 text-white': currentTab === 'recording' }" @click="setCurrentTab('recording')">
            订单信息
          </a-button>

        </div>

        <div class="mt-8 space-y-1">
          <div class="text-gray-600 font-medium mb-4">账户设置</div>
          <a-button type="text" class="block w-full text-left "
                    :class="{ 'bg-orange-500 text-white': currentTab === 'profile' }" @click="setCurrentTab('profile')">
            个人资料
          </a-button>
          <a-button v-if="!userRole" type="text" class="block w-full text-left "
                    :class="{ 'bg-orange-500 text-white': currentTab === 'verify' }" @click="setCurrentTab('verify')">
            认证管理
          </a-button>
        </div>
      </div>

      <!-- 主内容区 -->
      <div class="flex-shrink-0 left-20">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>


<style scoped>
:deep(input[type="number"]::-webkit-inner-spin-button),
:deep(input[type="number"]::-webkit-outer-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}

.ant-btn-text:hover {
  background-color: #ff6e4a !important;
  color: white !important;
  transition: all 0.3s ease;
}

</style>

